<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import { ${EntityName}Api } from '@/apis'
import { useDict, useForm } from '@/hooks'
import * as Regexp from '@/utils/regexp'
import type { Columns, Options } from '@/components/ProForm'
import ProForm from '@/components/ProForm'

const emit = defineEmits<{
  (e: 'change'): void
}>()

const visible = ref(false)
const formRef = ref<InstanceType<typeof ProForm>>()

<#list fieldConfigs as fieldConfig>
<#if fieldConfig.showInForm>
<#-- SELECT/RADIO/CHECK_BOX/TREE_SELECT控件从服务器端获取数据 -->
<#if fieldConfig.formType = 'SELECT' || fieldConfig.formType = 'RADIO'
	|| fieldConfig.formType = 'CHECK_BOX' || fieldConfig.formType = 'TREE_SELECT'>
const { ${fieldConfig.fieldType} } = useDict('${fieldConfig.fieldType}')
</#if>
</#if>
</#list>

const options: Options = {
  form: {},
  col: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },
  btns: { hide: true }
}

const columns: Columns = [
<#list fieldConfigs as fieldConfig>
  <#if fieldConfig.showInForm>
  {
    label: '${fieldConfig.comment}',
    field: '${fieldConfig.fieldName}',
    <#if fieldConfig.formType = 'INPUT'>
    type: 'input',
    <#elseif fieldConfig.formType = 'TEXT_AREA'>
    type: 'textarea',
    <#elseif fieldConfig.formType = 'DATE'>
    type: 'date-picker',
    <#elseif fieldConfig.formType = 'DATE_TIME'>
    type: 'time-picker',
    <#elseif fieldConfig.formType = 'INPUT_NUMBER'>
    type: 'input-number', 
    <#elseif fieldConfig.formType = 'INPUT_PASSWORD'>
    type: 'input-password',
    <#elseif fieldConfig.formType = 'SWITCH'>
    type: 'switch',
    <#elseif fieldConfig.formType = 'CHECK_BOX'>
    type: 'check-group',
    options: ${fieldConfig.fieldType},
   	<#elseif fieldConfig.formType = 'TREE_SELECT'>
    type: 'tree-select',
    data: ${fieldConfig.fieldType},
    <#elseif fieldConfig.formType = 'SELECT'>
    type: 'select', 
    options: ${fieldConfig.fieldType},
    <#elseif fieldConfig.formType = 'RADIO'>
    type: 'radio-group',   
    options: ${fieldConfig.fieldType},
    </#if>
    <#if fieldConfig.isRequired>
    rules: [{ required: true, message: '请输入${fieldConfig.comment}' }]
    </#if>
  },
  </#if>
</#list>
]

const { form, resetForm } = useForm({
    // todo 待补充
})

// 重置
const reset = () => {
  formRef.value?.formRef?.resetFields()
  resetForm()
}

// 新增
const open = () => {
  reset()
  visible.value = true
}

// 保存
const onSave = async () => {
  try {
    const isInvalid = await formRef.value?.formRef?.validate()
    if (isInvalid) {
      return false
    }
    await ${EntityName}Api.create(form)
    Message.success('创建成功')
    emit('change')
    return true
  } catch {
    return false
  }
}

defineExpose({ open })
</script>

<template>
  <ProFormPanel
    v-model:visible="visible"
    title="创建${businessName}"
    @before-ok="onSave"
    @close="reset"
  >
    <ProForm ref="formRef" v-model="form" :options="options" :columns="columns" />
  </ProFormPanel>
</template>

<style lang="less" scoped></style>
